<template>
  <div>
    <div class="flex gap-2">
      <span class="depset">部门设置</span>
      <el-tag
        class="other-set"
        v-for="tag in dynamicTags"
        :key="tag"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <el-input
        v-if="inputVisible"
        ref="InputRef"
        v-model="inputValue"
        class="w-20"
        size="small"
        @keyup.enter="handleInputConfirm"
        @blur="handleInputConfirm"
      />
      <el-button v-else class="button-new-tag" size="small" @click="showInput">
        + 添加部门
      </el-button>
    </div>
    <div class="flex gap-2">
      <span class="depset">产品设置</span>
      <el-tag
        class="other-set"
        v-for="tag in productTags"
        :key="tag"
        closable
        :disable-transitions="false"
        @close="handleProductClose(tag)"
      >
        {{ tag }}
      </el-tag>
      <el-input
        v-if="productInputVisible"
        ref="productInputRef"
        v-model="productinputValue"
        class="w-20"
        size="small"
        @keyup.enter="handleProductInputConfirm"
        @blur="handleProductInputConfirm"
      />
      <el-button v-else class="button-new-tag" size="small" @click="showProductInput">
        + 添加产品
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, toRaw } from 'vue'
import { ElInput, ElMessage } from 'element-plus'
import {
  getDepartmentAPI,
  getProductAPI,
  updateDepartmentAPI,
  updateProductAPI
} from '@/api/userAdmin'
import { tracking } from '@/utils/operation'

const userInfo = JSON.parse(localStorage.getItem('UserInfo')!).UserInfo

const inputValue = ref('')
const productinputValue = ref('')
const dynamicTags = ref([])
const productTags = ref([])
const inputVisible = ref(false)
const productInputVisible = ref(false)

const InputRef = ref<InstanceType<typeof ElInput>>()
const getDepartment = async () => {
  const res = await getDepartmentAPI()
  dynamicTags.value = JSON.parse(res.data!)
}

const productInputRef = ref<InstanceType<typeof ElInput>>()
const getproduct = async () => {
  const res = await getProductAPI()
  productTags.value = JSON.parse(res.data!)
}

// 关闭时的回调
const handleClose = async (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag as never), 1)
  await updateDepartmentAPI(JSON.stringify(toRaw(dynamicTags.value)))
  tracking('', userInfo?.name, '部门列表', '高级', `删除部门`)
  ElMessage({ type: 'success', message: '删除成功' })
}

// 关闭时的回调
const handleProductClose = async (tag: string) => {
  productTags.value.splice(productTags.value.indexOf(tag as never), 1)
  await updateProductAPI(JSON.stringify(toRaw(productTags.value)))
  tracking('', userInfo?.name, '产品列表', '高级', `删除产品`)
  ElMessage({ type: 'success', message: '删除成功' })
}

// 点击按钮出现输入框
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

// 点击按钮出现输入框
const showProductInput = () => {
  productInputVisible.value = true
  nextTick(() => {
    productInputRef.value!.input!.focus()
  })
}

// 输入数据后的回调
const handleInputConfirm = async () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value as never)
    await updateDepartmentAPI(JSON.stringify(toRaw(dynamicTags.value)))
    tracking('', userInfo?.name, '部门列表', '高级', `添加新部门`)
    ElMessage({ type: 'success', message: '添加成功' })
  }
  inputVisible.value = false
  inputValue.value = ''
}

// 输入数据后的回调
const handleProductInputConfirm = async () => {
  if (productinputValue.value) {
    productTags.value.push(productinputValue.value as never)
    await updateProductAPI(JSON.stringify(toRaw(productTags.value)))
    tracking('', userInfo?.name, '产品列表', '高级', `添加新产品`)
    ElMessage({ type: 'success', message: '添加成功' })
  }
  productInputVisible.value = false
  productinputValue.value = ''
}
onMounted(() => {
  getDepartment()
  getproduct()
})
</script>

<style scoped lang="scss">
.gap-2 {
  display: flex;
  margin-bottom: 20px;
  .depset {
    margin-left: 30px;
  }
  .other-set {
    margin-left: 15px;
  }
  .button-new-tag {
    margin-left: 15px;
  }
  .w-20 {
    width: 200px;
    margin-left: 15px;
  }
}
</style>
